<template>
	<view class="staff-tags flex-center">
		<u-tag v-if="staffStatus" size="mini" :text="STAFF_STATUS[staffStatus]?.label" plain plainFill
			@click="changeStatus" borderColor="#f1f1f100" :type="STAFF_STATUS[staffStatus]?.type" />
	</view>
</template>

<script setup>
	import {
		STAFF_STATUS,
	} from '@/constant/index.js'

	const props = defineProps({
		id: {
			type: Number,
			default: 0
		},
		staffStatus: {
			type: Number,
			default: 0
		}
	})

	const emits = defineEmits(["changeStatus"])

	const changeStatus = () => {
		emits("changeStatus", props.id, props.staffStatus)
	}
</script>

<style lang="scss">
	.staff-tags {
		.tag-item {
			margin-left: 10px;
		}
		
		::v-deep .u-tag__text {
			font-size: 10px;
		}
		
		::v-deep .u-tag--mini {
			height: 100% !important;
			line-height: 22px;
			padding: 2px 5px;
		}
	}
</style>